<template>
	<view class="main">
		<view class="row">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="title">
						提交人：{{item.staff.name}}
					</view>
					<view class="des">
						{{item.content}}
					</view>
					<view class="imglist">
						<image v-for="(imgs,img_i) in item.img" :key="img_i" :src="imgs.path"
							@click="seeimg(item.img,img_i)" mode="">
						</image>
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
			</view>
			<view class="no-list" v-if="list.length == 0">
				<image src="/static/index/nolist.png" mode="widthFix"></image>
				- 暂无数据 -
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNews
	} from "@/api/user.js"
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1
			}
		},
		onLoad() {
			this.getNews()
		},
		methods: {
			seeimg(imgs, index) {
				let img = imgs.map(item => {
					return item.path
				})
				let urls = img
				uni.previewImage({
					urls,
					current: index
				})
			},
			getNews() {
				getNews({
					page: this.page
				}).then(res => {
					if (res.code == 0) {
						this.list = this.list.concat(res.data.data)
						this.last_page = res.data.last_page
					}
				})

			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f5f8;
		box-sizing: border-box;
	}

	.row {
		margin-top: 10px;

		.list {
			padding: 0 3%;

			.item {
				background: #fff;
				border-radius: 5px;
				padding: 10px;
				box-sizing: border-box;
				margin-bottom: 15px;

				.title {
					font-size: 14px;
					font-weight: bold;
				}

				.des {
					font-size: 12px;
					color: #777;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					margin: 10px 0;
				}

				.time {
					font-size: 12px;
					color: #777;
					margin-top: 10px;
				}
			}

			.imglist {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;

				image {
					width: 50px;
					height: 50px;
					margin-right: 20px;
				}
			}
		}
	}
</style>